<template>
    <view>
        <view style="margin: 20rpx;color: #ccc;">
            请根据所需资料进行填写修改
        </view>
        <view style="background-color: white">
            <!-- 基础表单校验 -->
            <up-form :model="form" :rules="rules" label-width="90px" ref="formRef">
                <view class="form_part">
                    <up-form-item label="登录账号" prop="account" border-bottom>
                        <up-input type="number" placeholder="请输入登录账号" border="none" v-model="form.account"
                            clearable></up-input>
                    </up-form-item>
                    <up-form-item label="手机号" prop="account" border-bottom>
                        <up-input type="number" placeholder="请输入手机号" border="none" v-model="form.sendMobilePhone"
                            clearable></up-input>
                    </up-form-item>
                    <up-form-item label="新的密码" prop="password" border-bottom>
                        <up-input placeholder="请输入新的密码" border="none" v-model="form.password" clearable></up-input>
                    </up-form-item>
                    <up-form-item label="重复密码" prop="repeatPassword" border-bottom>
                        <up-input placeholder="请重复输入新的密码" border="none" v-model="form.repeatPassword"
                            clearable></up-input>
                    </up-form-item>
                    <up-form-item label="验证码" prop="code">
                        <up-input type="number" border="none" v-model="form.code" placeholder="请输入验证码"
                            clearable></up-input>
                        <template v-slot:right>
                            <up-code :seconds="60" ref="uCode" @change="codeChange"></up-code>
                            <up-button type="primary" @tap="getCode">{{ tips }}</up-button>
                        </template>
                    </up-form-item>
                </view>
            </up-form>
        </view>
        <view class="form_button">
            <up-button type="primary" @click="submit">提交</up-button>
        </view>
        <view class="text-center" style="margin-top: 20px;">
            <text @click="handleUserLogin" class="text-blue">使用已有账号登录</text>
        </view>
    </view>
    <up-toast ref="uToastRef"></up-toast>
</template>

<script lang="ts" setup>
import {
    reactive,
    ref
} from 'vue'
import {
    forgotPasswordGetCode,
    updatePassword
} from '@/api/login'
import {
    encrypt
} from "@/utils/encryption"

/* 数据 */
// 表单
const formRef = ref<UniFormRef | null>(null)
const form = reactive({
    account: '',
    sendMobilePhone: '',
    password: '',
    repeatPassword: '',
    code: ''
})
// 校验规则
const rules = reactive({
    'account': [{
        type: 'string',
        required: true,
        message: '手机号不能为空',
        trigger: ['blur', 'change']
    },
    {
        pattern: /(^1[3-9][0-9]{9}$)/g,
        message: '手机格式错误',
        trigger: ['blur', 'change']
    }
    ],
    'sendMobilePhone': [{
        type: 'string',
        required: true,
        message: '手机号不能为空',
        trigger: ['blur', 'change']
    },
    {
        pattern: /(^1[3-9][0-9]{9}$)/g,
        message: '手机格式错误',
        trigger: ['blur', 'change']
    }
    ],
    'password': {
        type: 'string',
        required: true,
        message: '新密码不能为空',
        trigger: ['blur', 'change']
    },
    'repeatPassword': {
        type: 'string',
        required: true,
        message: '重复密码不能为空',
        trigger: ['blur', 'change']
    },
    'code': {
        type: 'string',
        required: true,
        message: '验证码不能为空',
        trigger: ['blur', 'change']
    }
})
// 验证码提示
const tips = ref('')
const uCode = ref<any>(null)

// 提示
const uToastRef = ref<any>(null)



/* 函数 */
// 获取验证码tips转换
const codeChange = (text: string) => {
    tips.value = text
}
// 获取验证码
const getCode = async () => {
    if (!form.account || !(/(^1[3-9][0-9]{9}$)/g).test(form.account)) {
        uToastRef.value.show({
            position: "top",
            type: 'error',
            message: "账号必须为11位电话号码"
        })
        return
    }
    if (form.password !== form.repeatPassword) {
        uToastRef.value.show({
            position: "top",
            type: 'error',
            message: "两个密码不一致"
        })
        return
    }
    if (uCode.value?.canGetCode) {
        uToastRef.value.show({
            type: 'loading',
            message: "正在获取验证码",
            duration: -1
        })
        let codeRes = await forgotPasswordGetCode({
            account: encrypt(form.account) as string,
            sendMobilePhone: encrypt(form.sendMobilePhone) as string
        })
        uToastRef.value.hide()
        if (codeRes.success) {
            uToastRef.value.show({
                position: "top",
                type: 'success',
                message: "验证码已发送"
            })
        }
        // 通知验证码组件内部开始倒计时
        uCode.value.start()
    } else {
        uToastRef.value.show({
            position: "top",
            type: 'error',
            message: "倒计时结束后再发送"
        })
    }
}
// 提交
const submit = async () => {
    let valid = await formRef.value?.validate()
    if (valid) {
        if (form.password !== form.repeatPassword) {
            uToastRef.value.show({
                position: "top",
                type: 'error',
                message: "两个密码不一致"
            })
            return
        }
        uToastRef.value.show({
            type: 'loading',
            message: "请稍候",
            duration: -1
        })
        let params = {
            account: encrypt(form.account) as string,
            confirmPassword: encrypt(form.repeatPassword) as string,
            password: encrypt(form.password) as string,
            code: encrypt(form.code) as string,
            phone: encrypt(form.sendMobilePhone) as string
        }
        let res = await updatePassword(params)
        uToastRef.value.hide()
        if (res.success) {
            uToastRef.value.show({
                position: "top",
                type: 'success',
                message: "修改成功",
                complete() {
                    uni.reLaunch({
                        url: "/pages/login"
                    })
                }
            })
        }
    }
}
// 回到登录页
const handleUserLogin = () => {
    uni.reLaunch({
        url: "/pages/login"
    })
}
</script>

<style lang="scss" scoped>
.form_part {
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.form_button {
    margin-left: 5%;
    width: 90%;
}
</style>